<template>
	<view class="order-list">
		<!-- tab切换部分 -->
		<header-user
			:index="pageObj.tabIndex"
			:tabList="pageObj.tabList"
			@tabClick="tabClick">
		</header-user>
		
		<swiper
			class="body-swiper"
			:style="{height: pageObj.screenHeight + 'px'}"
			:current="pageObj.tabIndex"
			@change="bodySwiperChange">
			
			<!-- 消费订单 -->
			<swiper-item class="body-swiper-item">
				<view class="block" :class="pageObj.manage ? 'opts' : ''" v-for="(item, idx) in dataObj.consumptionList" :key="item.order_id">
					<view class="select" :class="item.selected ? 'selected' : ''" @click="onSelectTap(idx)"></view>
					<view class="consumption" @click="onPageTap(item)">
						<image class="cover" :src="item.cover_url"></image>
						<view class="title">消费订单</view>
						<view class="price">
							价格：
							<span class="number">{{item.order_amount}}</span>
						</view>
						<view v-if="item.pay_status === 1" class="pay-btn" @click.stop="onPayTap(item)">待支付</view>
						<image v-if="item.pay_status === 2" class="status" src="../../../static/images/user/order-finish.png"></image>
						<image v-if="item.pay_status === 5" class="status" src="../../../static/images/user/order-cancel.png"></image>
					</view>
				</view>
			</swiper-item>
			
			<!-- 充值订单 -->
			<swiper-item class="body-swiper-item">
				<view class="block" :class="pageObj.manage ? 'opts' : ''" v-for="(item, idx) in dataObj.rechargeList" :key="item.order_id">
					<view class="select" :class="item.selected ? 'selected' : ''" @click="onSelectTap(idx)"></view>
					<view class="recharge" @click="onPageTap(item)">
						<image class="cover" src="../../../static/images/user/order-recharge.png"></image>
						<view class="title">充值</view>
						<view class="price">
							价格：
							<span class="number">{{item.order_amount}}</span>
						</view>
						<view v-if="item.pay_status === 1" class="pay-btn" @click.stop="onPayTap(item)">待支付</view>
						<image v-if="item.pay_status === 2" class="status" src="../../../static/images/user/order-finish.png"></image>
						<image v-if="item.pay_status === 5" class="status" src="../../../static/images/user/order-cancel.png"></image>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<view class="footer">
			<view class="f-block" v-if="pageObj.manage">
				<view class="select-all" :class="pageObj.isALL ? 'selected' : ''" @click="onSelectAllTap">全选</view>
				<view class="sum">
					<span class="del-sum">{{sum}}</span>个
				</view>
				<view class="btn del" @click="onDelTap">删除</view>
				<view class="btn finish" @click="pageObj.manage = false">完成</view>
			</view>
			<view class="f-block" v-else>
				<view class="btn manage" @click="pageObj.manage = true">管理</view>
			</view>
		</view>
		<view style="height: 50px;"></view>
	</view>
</template>

<script>
	import headerUser from '@/components/header/header-user.vue';
	import { requestErrorTip } from '@/common/tools.js';
	
	export default {
		components: {
			headerUser
		},
		data() {
			return {
				pageObj: {
					screenHeight: 0, // 记录屏幕高度
					tabIndex: 0,
					tabList: [{
						name: '消费订单'
					}, {
						name: '充值订单'
					}],
					isALL: false,
					manage: false
				},
				dataObj: {
					// 消费订单
					consumptionList: [],
					// 充值订单
					rechargeList: []
				}
			}
		},
		computed: {
			// 选中数量
			sum: function() {
				let sum = 0;
				let hasNoSelect = false; // 判断是否存在一个数据没有选中
				const list = this.pageObj['tabIndex'] === 0 ? this.dataObj['consumptionList'] : this.dataObj['rechargeList'];
				for(let i in list){
					const item = list[i];
					if (item['selected']) {
						sum++;
					} else {
						hasNoSelect = true;
					}
				}
				if (hasNoSelect || list.length === 0) {
					// 至少一个未有选中，则设置全部为选中
					this.pageObj['isALL'] = false;
				} else {
					// 全部都选中的，则设置全部为不选中
					this.pageObj['isALL'] = true;
				}
				return sum;
			}
		},
		onShow() {
			this.getData(); // 获取数据
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.getData();
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			// 获取屏幕高度，并设置swiper 的高度
			getScreenHeight () {
				let headHeight = 0;
				const query = uni.createSelectorQuery().in(this);
				query.select('.header-user').boundingClientRect(data => {
					headHeight = data.height;
				}).exec();
				uni.getSystemInfo({
				    success: res => {
						this.pageObj['screenHeight'] = res['screenHeight'] - headHeight; // 减去底部的50
				    }
				});
			},
			// 监听头部子组件的点击事件
			tabClick (index) {
				this.pageObj['tabIndex'] = index;
			},
			// 左右切换主体
			bodySwiperChange (event) {
				this.pageObj['tabIndex'] = event.detail.current;
				this.pageObj['manage'] = false;
				this.getData(); // 获取数据
			},
			// 跳转详情页面
			onPageTap(item) {
				const payment_type = this.pageObj['tabIndex'] + 1;
				uni.navigateTo({
					url: './order-detail?type=' + payment_type + '&id=' + item['order_id']
				});
			},
			// 立即支付
			onPayTap(item) {
				const payment_type = this.pageObj['tabIndex'] + 1;
				uni.navigateTo({
					url: '/pages/order/pay-order?payment_type=' + payment_type + '&order_id=' + item.order_id + '&amount=' + item.order_amount
				});
			},
			// 选择单个
			onSelectTap(index) {
				let list = this.pageObj['tabIndex'] === 0 ? this.dataObj['consumptionList'] : this.dataObj['rechargeList'];
				list[index]['selected'] = !list[index]['selected'];
			},
			// 选择全部
			onSelectAllTap() {
				let hasNoSelect = false; // 判断是否存在一个数据没有选中
				let list = this.pageObj['tabIndex'] === 0 ? this.dataObj['consumptionList'] : this.dataObj['rechargeList'];
				for(let i in list){
					if (!list[i]['selected']) {
						hasNoSelect = true;
					}
				}
				if (hasNoSelect) {
					// 至少一个未有选中，则设置全部为选中
					this.pageObj['isALL'] = true;
					for(let i in list){
						list[i]['selected'] = true;
					}
				} else {
					// 全部都选中的，则设置全部为不选中
					this.pageObj['isALL'] = false;
					for(let i in list){
						list[i]['selected'] = false;
					}
				}
			},
			// 删除
			onDelTap() {
				let ids = '';
				const list = this.pageObj['tabIndex'] === 0 ? this.dataObj['consumptionList'] : this.dataObj['rechargeList'];
				for(let i in list) {
					const item = list[i];
					if (item['selected']) {
						if (ids) {
							ids += ',' + item['order_id'];
						} else {
							ids = item['order_id'];
						}
					}
				}
				if (this.sum <= 0) {
					// 显示模态框
					uni.showModal({
						title: '温馨提示',
						showCancel: false,
						content: '您还未选择订单哦！',
						confirmColor: '#FE6B00'
					});
					return false;
				}
				let that = this;
				uni.showModal({
					title: '警告',
					content: '删除订单，相关课程记录，培训记录等都会被删除，确定删除吗？',
					confirmColor: '#FE6B00',
					success: function (res) {
						if (res.confirm) {
							that.postDelData(ids);
						}
					}
				});
			},
			// 提交删除
			postDelData(order_ids) {
				this.$Requset({
					url: this.$Api['order']['del'],
					data: {
						order_ids: order_ids,
						type: this.pageObj['tabIndex'] + 1
					},
					loading: false,
					success: (res) => {
						const { status, msg } = res;
						requestErrorTip('toast', msg);
						this.pageObj['isALL'] = false;
						this.getData();
					},
					fail: (err) => {
						console.log(err);
					}
				})
			},
			// 获取数据
			getData() {
				this.$Requset({
					url: this.$Api['order']['list'],
					data: {
						list_type: this.pageObj['tabIndex'],
					},
					loading: false,
					success: (res) => {
						const { data, status, msg } = res;
						if (!status) {
							requestErrorTip('toast', msg);
							return;
						}
						// 处理数据
						if (this.pageObj['tabIndex'] === 0) {
							// 消费订单
							this.dataObj['consumptionList'] = data['list'].filter(item => {
								// 获取订单商品列表第一个商品的封面图作为订单封面图
								item['cover_url'] = item['items'].length ? item['items'][0]['image_url'] : '';
								item['selected'] = false;
								return item;
							});
						} else if (this.pageObj['tabIndex'] === 1) {
							// 充值订单
							this.dataObj['rechargeList'] = data['list'].filter(item => {
								item['selected'] = false;
								return item;
							});
						}
						this.getScreenHeight();
					},
					fail: (err) => {
						console.log(err);
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		position: relative;
		background-color: #f5f5f5;
	}
	.order-list{
		height: 100%;
		margin-bottom: 90rpx;
		// #ifndef APP-PLUS
		.header-user{
			top: 88rpx;
		}
		// #endif
		.body-swiper{
			box-sizing: border-box;
			height: 100%;
			padding-top: 98rpx;
			&-item{
				overflow-y: scroll;
				overflow-x: hidden;
				.block{
					position: relative;
					padding: 0;
					background-color: #FFFFFF;
					.select{
						position: absolute;
						top: 32rpx;
						left: 36rpx;
						width: 40rpx;
						height: 40rpx;
						background-repeat: no-repeat;
						background-position: center center;
						background-size: 100%;
						background-image: url(../../../static/images/cart/select.png);
					}
					.selected{
						background-image: url(../../../static/images/cart/selected.png);
					}
				}
				.opts{
					padding-left: 76rpx;
				}
				.pay-btn{
					position: absolute;
					bottom: 36rpx;
					right: 36rpx;
					width: 128rpx;
					height: 50rpx;
					line-height: 50rpx;
					font-size: 22rpx;
					color: #FFFFFF;
					text-align: center;
					background-color: $color-common;
					border-radius: 25rpx;
				}
				.status{
					position: absolute;
					bottom: 1rpx;
					right: 2rpx;
					width: 124rpx;
					height: 124rpx;
				}
				.consumption{
					position: relative;
					padding: 32rpx 36rpx 32rpx 288rpx;
					.cover{
						position: absolute;
						top: 32rpx;
						left: 30rpx;
						width: 237rpx;
						height: 147rpx;
						border-radius: 14rpx;
						background-color: #EEE;
					}
					.title{
						height: 68rpx;
						line-height: 34rpx;
						font-size: 28rpx;
						color: #1A1A1A;
						margin-bottom: 24rpx;
					}
					.price{
						line-height: 48rpx;
						font-size: 22rpx;
						color: #7F7F7F;
						vertical-align: bottom;
						.number{
							position: relative;
							line-height: 48rpx;
							font-size: 36rpx;
							color: $color-common;
							padding-left: 20rpx;
							&::before{
								content: '¥';
								position: absolute;
								top: 0;
								left: 0;
								line-height: 48rpx;
								font-size: 22rpx;
								vertical-align: bottom;
							}
						}
					}
				}
				.recharge{
					position: relative;
					padding: 32rpx 36rpx 32rpx 164rpx;
					.cover{
						position: absolute;
						top: 32rpx;
						left: 36rpx;
						width: 110rpx;
						height: 110rpx;
					}
					.title{
						line-height: 40rpx;
						font-size: 28rpx;
						color: #1A1A1A;
						margin-bottom: 18rpx;
					}
					.price{
						line-height: 52rpx;
						font-size: 22rpx;
						color: #7F7F7F;
						vertical-align: bottom;
						.number{
							position: relative;
							line-height: 52rpx;
							font-size: 36rpx;
							color: $color-common;
							padding-left: 20rpx;
							&::before{
								content: '¥';
								position: absolute;
								top: 0;
								left: 0;
								line-height: 52rpx;
								font-size: 22rpx;
								vertical-align: bottom;
							}
						}
					}
					// .finish{
					// 	position: absolute;
					// 	top: 50%;
					// 	margin-top: -62rpx;
					// 	right: .2rem;
					// 	width: 124rpx;
					// 	height: 124rpx;
					// }
				}
			}
		}
		
		.footer{
			box-sizing: border-box;
			position: fixed;
			z-index: 99;
			bottom: 0;
			// #ifdef H5
			// bottom: 100rpx;
			// #endif
			left: 0;
			width: 100%;
			height: 90rpx;
			padding: 10rpx 200rpx 10rpx 36rpx;
			background-color: #FFFFFF;
			.select-all{
				float: left;
				position: relative;
				line-height: 70rpx;
				width: 66rpx;
				font-size: 26rpx;
				color: #1A1A1A;
				padding-left: 48rpx;
				margin-right: 14rpx;
				&::before{
					content: '';
					position: absolute;
					top: 50%;
					margin-top: -20rpx;
					left: 0;
					width: 40rpx;
					height: 40rpx;
					background-repeat: no-repeat;
					background-position: center center;
					background-size: 100%;
					background-image: url(../../../static/images/cart/select.png);
				}
				&::after{
					content: '';
					position: absolute;
					top: 50%;
					margin-top: -18rpx;
					right: 0;
					width: 1rpx;
					height: 36rpx;
					background-color: #E4EAED;
				}
			}
			.selected{
				&::before{
					background-image: url(../../../static/images/cart/selected.png);
				}
			}
			.sum{
				line-height: 70rpx;
				font-size: 26rpx;
				color: #1A1A1A;
				.del-sum{
					font-size: 40rpx;
					font-weight: bold;
					color: $color-common;
					vertical-align: bottom;
					margin-right: 10rpx;
				}
			}
			.btn{
				position: absolute;
				top: 15rpx;
				right: 36rpx;
				width: 150rpx;
				height: 60rpx;
				line-height: 60rpx;
				font-size: 26rpx;
				color: #FFFFFF;
				text-align: center;
				background-color: $color-common;
				border-radius: 30rpx;
			}
			.del{
				right: 200rpx;
			}
			.finish, .manage{
				background-color: #373737;
			}
		}
	}
</style>
